<p ng-if="annotations" ng-class="{'mar-bottom-xl': !expandAnnotations}">
  <a href="" ng-click="toggleAnnotations()">{{expandAnnotations ? 'Hide Annotations' : 'Show Annotations'}}</a>
</p>
<div ng-if="expandAnnotations && annotations" class="table-responsive scroll-shadows-horizontal">
  <table class="table table-bordered table-bordered-columns key-value-table">
    <tbody>
      <tr ng-repeat="(annotationKey, annotationValue) in annotations">
        <td class="key">{{annotationKey}}</td>
        <td class="value">
          <truncate-long-text
            content="annotationValue | prettifyJSON"
            limit="500"
            newline-limit="20"
            expandable="true">
          </truncate-long-text>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<p ng-if="!annotations" class="mar-bottom-xl">
  There are no annotations on this resource.
</p>
